<template>
    <div class="view-item">
        <router-link to="/newsDetail">
            <div class="img">
                <img class="view-img" src="~images/1.png" alt="照片出错啦" />
            </div>
            <h1 class="title">潮州市古城首批选入中国夜间文化和夜间旅游消费集聚区公示名单</h1>
            <div class="others">
                <span class="item">潮州市文旅</span>
                <span class="item">2023-10-12</span>
            </div>
        </router-link>
    </div>
</template>

<script>
import Stars from 'components/ScrollWrapper/Sub/Stars';

export default {
    name: 'ViewListSub',
    components: {
        Stars
    },
    props: {
        data: Object
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';

.view-item {
    width: 50%;
    padding: .1rem;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;

    .img {
        width: 100%;
        height: 1.1rem;
        overflow: hidden;

        .view-img {
            width: 100%;
            min-height: 1.1rem;
        }
    }

  
    .title {
        @include ellipsis;
        height: .3rem;
        font-size: .16rem;
        line-height: .3rem;
        color: #000;
    }


    .others {
        display: flex;
        justify-content: space-between;
        height: .3rem;
        line-height: .3rem;

        .item {
            font-size: .14rem;
        }
    }
}
</style>
